<template>
  <div id="newsInformation">
    <img
      src="https://njmcsw.oss-cn-beijing.aliyuncs.com/guanwang/bannermc5.png"
      class="banner"
    />
    <!--<div>
      <img src="@/assets/image/fulibanner.jpg" width="100%">
    </div>-->
    <div class="news-container">
      <div class="news-nav">
        <div class="nav-title">
          <h3>全部</h3>
          <span>ALL</span>
        </div>
        <ul class="nav-ul">
          <li
            class="nav-li"
            :class="{ active: newsType === 0 }"
            @click="getNews(0)"
          >
            公司动态
          </li>
          <li
            class="nav-li"
            :class="{ active: newsType === 1 }"
            @click="getNews(1)"
          >
            行业新闻
          </li>
        </ul>
      </div>
      <ul class="news-list" v-if="newsType == 0">
        <template>
          <li class="news-li" v-for="(item, index) in newsdtList" :key="index">
            <nuxt-link
              :to="{ path: '/newsDetails?id=' + item.id }"
              class="title-synopsis"
            >
              <h3 class="title">{{ item.title }}</h3>
              <p class="synopsis">{{ item.description }}</p>
            </nuxt-link>
            <div class="date">
              <div style="margin: 1rem 0">
                {{ item.createDate.split("-")[0] }}
              </div>
              <div>
                {{
                  item.createDate.split("-")[1] +
                  "-" +
                  item.createDate.split("-")[2].split(" ")[0]
                }}
              </div>
            </div>
          </li>
          <!-- <ul class="pagination" v-show="newsType === 0">
            <li
              class="pagination-item"
              v-for="index in total1"
              :key="index"
              :class="{ active: currentPage1 == index }"
            >
              <a v-on:click="loadData1(index)">{{ index }}</a>
            </li>
          </ul> -->
          <a-pagination
            style="float: right"
            :default-current="1"
            v-model="currentPage1"
            :total="total1"
            :pageSize="3"
            @change="loadData1(currentPage1)"
          />
        </template>
      </ul>
      <ul class="news-list" v-else>
        <template>
          <li class="news-li" v-for="(item, index) in newsList" :key="index">
            <nuxt-link
              :to="{ path: '/newsDetails?id=' + item.id }"
              class="title-synopsis"
            >
              <h3 class="title">{{ item.title }}</h3>
              <p class="synopsis">{{ item.description }}</p>
            </nuxt-link>
            <div class="date">
              <div style="margin: 1rem 0">
                {{ item.createDate.split("-")[0] }}
              </div>
              <div>
                {{
                  item.createDate.split("-")[1] +
                  "-" +
                  item.createDate.split("-")[2].split(" ")[0]
                }}
              </div>
            </div>
          </li>
          <!-- <ul class="pagination" v-show="newsType === 1">
            <li
              class="pagination-item"
              v-for="index in total"
              :key="index"
              :class="{ active: currentPage == index }"
            >
              <a v-on:click="loadData(index)">{{ index }}</a>
            </li>
          </ul> -->
          <a-pagination
            style="float: right"
            @change="loadData(currentPage)"
            v-model="currentPage"
            :total="total"
            :pageSize="3"
          />
        </template>
      </ul>
    </div>
    <div class="footer-top">
      <div class="licence-code">
        <ul class="nav">
          <li>首页</li>
          <li>产品与服务</li>
          <li>解决方案</li>
          <li>开放平台</li>
          <li class="active">新闻中心</li>
          <li>关于我们</li>
          <li>联系我们</li>
        </ul>
        <!--        <div>-->
        <!--          <h5 class="about-h55">服务热线</h5>-->
        <!--          <h5>025-85500001</h5>-->
        <!--        </div>-->
        <!-- <div>
          <h5 class="about-h55">企业地址</h5>
          <p class="adress">
            南京总公司：南京市秦淮区光华路海福巷90-1号 南报文创园
          </p>
        </div> -->
      </div>
    </div>
  </div>
</template>

<script>
import THeader from "@/components/t-header";
export default {
  name: "newsInformation",
  components: {
    THeader,
  },
  asyncData({ store, $api }) {
    let sid = store.state.sid;
    return Promise.all([$api.getNewsye(sid, 1), $api.getNewDt(sid)])
      .then((res) => {
        store.commit("setNewList", res[0].articleList);
        store.commit("setNewsTotal", res[0].pageSum);
        store.commit("setNewdtList", res[1].articleList);
        store.commit("setNewsdtTotal", res[1].pageSum);
      })
      .catch((err) => {
        throw err;
      });
  },
  data() {
    return {
      current: 2,
      newsType: 0,
      page: 0,
      currentPage: 1,
      all: "", //总页数
      cur: 1, //当前页码
      maxCount: 12,
      newslist: [],
      currentPage1: 1,
      all1: "", //总页数
      cur1: 1, //当前页码
      tongtai: [],
      imgurl1: "http://47.101.68.212:8218",
    };
  },
  computed: {
    newsdtList() {
      return this.$store.state.newsdtList;
    },
    total1() {
      return this.$store.state.newstdTotal;
    },
    newsList() {
      return this.$store.state.newsList;
    },
    total() {
      return this.$store.state.mewsTotal;
    },
    indexs() {
      var left = 1;
      var right = this.total;
      var ar = [];
      while (left <= right) {
        ar.push(left);
        left++;
      }
      return ar;
    },
    indexs1() {
      var left = 1;
      var right = this.total;
      var ar1 = [];
      while (left <= right) {
        ar1.push(left);
        left++;
      }
      return ar1;
    },
  },
  mounted() {
    this.loadData1(1);
  },
  methods: {
    getNews(index) {
      this.newsType = index;
    },
    getPages(e) {
      this.currentPage = e.target.innerText;
    },
    loadData(currentPage) {
      let sid = this.$store.state.sid;
      let start = parseInt(currentPage - 1) * 6;
      if (isNaN(start)) {
        start = 0;
        currentPage = 1;
        this.currentPage = 1;
      }
      this.currentPage = currentPage;
      this.$api
        .getNewsye(sid, currentPage)
        .then((res) => {
          this.$store.commit("setNewList", res.articleList);
        })
        .catch((res) => {
          this.$message({
            showClose: true,
            message: "获取新闻失败！",
            type: "error",
          });
        });
    },
    loadData1(currentPage1) {
      let sid = this.$store.state.sid;
      let start = parseInt(currentPage1 - 1) * 6;
      if (isNaN(start)) {
        start = 0;
        currentPage1 = 1;
        this.currentPage1 = 1;
      }
      this.currentPage1 = currentPage1;
      this.$api
        .getNewDt(sid, currentPage1)
        .then((res) => {
          this.$store.commit("setNewdtList", res.articleList);
        })
        .catch((res) => {
          this.$message({
            showClose: true,
            message: "获取新闻失败！",
            type: "error",
          });
        });
    },
    //请求数据
    dataListFn() {
      let that = this;
      this.$axios({
        url: "fyapi/fyapi/xinwenPageList",
        method: "get",
        params: {
          pageNum: this.cur,
        },
      }).then(function (res) {
        console.log(res);
        that.all = res.data.pageSum;
        that.newslist = res.data.articleList;
      });
    },
    tddataListFn() {
      let that = this;
      this.$axios({
        url: "fyapi/fyapi/dongtaiList",
        method: "get",
        params: {
          pageNum: this.cur1,
        },
      }).then(function (res) {
        console.log(res);
        that.all1 = res.data.pageSum;
        that.dongtai = res.data.articleList;
      });
    },
    //分页
    btnClick(data) {
      //页码点击事件
      if (data != this.cur) {
        this.cur = data;
      }
      //根据点击页数请求数据
      this.dataListFn(this.cur.toString());
    },
    btnClick1(data) {
      //页码点击事件
      if (data != this.cur1) {
        this.cur1 = data;
      }
      //根据点击页数请求数据
      this.tddataListFn(this.cur1.toString());
    },
  },
};
</script>

<style scoped lang="scss">
#newsInformation {
  .footer-top {
    position: relative;
    bottom: 0;
    width: 100%;
    height: 16rem;
    background: linear-gradient(180deg, #e63f04, #ac0d0d);
    color: #fff;

    .licence-code {
      width: 120rem;
      height: 16rem;
      margin: auto;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .nav {
        display: flex;

        li {
          font-size: 1.6rem;
          font-family: MicrosoftYaHei, MicrosoftYaHei-Regular;
          font-weight: 400;
          text-align: left;
          color: #ffffff;
          line-height: 2rem;
          margin-right: 4.1rem;
        }

        .active {
          font-family: MicrosoftYaHei, MicrosoftYaHei-Bold;
          font-weight: 700;
        }
      }

      .about-h55 {
        margin: 0rem 0 1.8rem;
      }

      .licence-h5,
      .QR-code-h5 {
        padding-bottom: 1.6rem;
        border-bottom: 1px solid #fff;
        margin: 2rem 0 1.1rem;
      }

      h5 {
        color: #fff;
        font-size: 1.6rem;
        font-weight: 700;
      }

      p {
        margin-bottom: 0.7rem;
        font-size: 1.4rem;
        line-height: 1.9rem;
      }
    }
  }
  .banner {
    width: 100%;
  }
  .news-container {
    margin: 3.8rem auto 0;
    width: 103rem;
    display: flex;
    .news-nav {
      background: linear-gradient(180deg, #e63f04, #ac0d0d 100%);
      width: 21.3rem;
      flex: 0 0 21.3rem;
      height: 28.9rem;
      color: #fff;
      .nav-title {
        padding: 2.7rem 0 1.6rem 4rem;
        h3 {
          color: #fff;
          font-size: 2rem;
          line-height: 2.6rem;
          margin-bottom: 0.2rem;
        }
        span {
          font-size: 1.3rem;
          line-height: 1.7rem;
        }
      }
      .nav-ul {
        padding: 0 3rem;
        .nav-li {
          font-size: 1.3rem;
          padding: 1.6rem 0 2rem;
          border-bottom: 1px solid #fff;
          display: flex;
          align-items: center;
          cursor: pointer;
          &:before {
            content: "";
            display: block;
            width: 0.4rem;
            height: 1.3rem;
            background: transparent;
            margin-right: 0.7rem;
          }
          &:hover {
            color: #d8d8d8;
          }
        }
        .active {
          &:before {
            content: "";
            display: block;
            width: 0.4rem;
            height: 1.3rem;
            background: #fff;
            margin-right: 0.7rem;
          }
        }
      }
    }
    .news-list {
      margin-left: 3.7rem;
      margin-bottom: 4rem;
      .news-li {
        display: flex;
        padding: 0.2rem 3rem 3.4rem 0;
        border-bottom: 1px solid #eaeaea;
        margin-bottom: 3.2rem;
        cursor: pointer;
        &:hover {
          .news-img {
            img {
              transform: scale(1.2);
              transition: transform linear 0.7s;
            }
          }
          .title-synopsis {
            .title {
              color: #b10808;
            }
          }
        }
        .news-img {
          width: 20rem;
          flex: 0 0 20rem;
          height: 12rem;
          margin-right: 4.4rem;
          overflow: hidden;
          img {
            width: 20rem;
            height: 12rem;
            object-fit: cover;
            transition: transform linear 0.4s;
          }
        }
        .title-synopsis {
          display: flex;
          flex-direction: column;
          justify-content: center;
          .title {
            font-size: 1.6rem;
            margin-bottom: 1.6rem;
            color: #666;
          }
          .synopsis {
            width: 62.8rem;
            font-size: 1.3rem;
            color: #afafaf;
            line-height: 2rem;
            display: -webkit-box;
            overflow: hidden;
            text-overflow: ellipsis;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
          }
        }
        .date {
          align-items: center;
          color: #999;
          font-size: 2.7rem;
          margin-left: 4.7rem;
          white-space: nowrap;
        }
      }
    }
  }
  .pagination {
    margin: 0 auto 6.6rem;
    display: flex;
    justify-content: center;
    width: 117rem;
    padding-left: 25rem;
    .pagination-item {
      width: 3.5rem;
      line-height: 3.5rem;
      text-align: center;
      background-color: #c9c9c9;
      margin-right: 2rem;
      color: #fff;
      cursor: pointer;
      font-size: 1.4rem;
    }
    .active {
      background-color: #4b4b4b;
    }
  }
}
@media screen and (max-width: 750px) {
  .nav-li {
    position: relative;
    border-bottom: none !important;
    &:after {
      display: block;
      content: "";
      height: 1px;
      background-color: #fff;
      position: absolute;
      width: 100%;
      bottom: 0;
      transform: scaleY(0.5);
    }
  }
  .news-li {
    position: relative;
    border-bottom: none !important;
    &:after {
      display: block;
      content: "";
      height: 1px;
      background-color: #eaeaea;
      position: absolute;
      width: 100%;
      bottom: 0;
      transform: scaleY(0.5);
    }
  }
}
</style>
